<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-date-picker
					class="x_soso"
					v-model="valueDate"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
				<el-input class="x_soso" v-model="search.searchInput" placeholder="请输入角色名称/角色编码搜索"></el-input>
				<el-select class="x_soso" filterable v-model="search.schemeName" placeholder="按归属组织机构搜索">
					<el-option v-for="item in options" :key="item.schemeId" :label="item.schemeName" :value="item.schemeId"></el-option>
				</el-select>
				<el-select class="x_soso" filterable v-model="search.title" placeholder="按停启用状态搜索">
					<el-option v-for="item in openList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-button type="primary" @click="searchList">查询</el-button>
			</div>
			<div style="text-align: left;">
				<el-button type="primary" @click="reloadVal">刷新</el-button>
				<el-button type="primary" @click="addColumnClick">
					<i class="el-icon-plus"></i>
					创建角色
				</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table @sort-change='sortChange' v-loading="loading" :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="角色编码" align="center" width="150" prop="roleId"></el-table-column>
				<el-table-column label="角色名称" align="center" width="150" prop="roleName"></el-table-column>
				<el-table-column label="创建日期"  :sortable="'custom'" align="center" width="150" prop="createTime"></el-table-column>
				<el-table-column label="归属组织机构" align="center" width="150" prop="schemeName"></el-table-column>
				<!-- <el-table-column label="使用状态" align="center" width="150" prop="roleType"></el-table-column> -->
				<el-table-column label="备注" align="center" width="150" prop="roleDesc"></el-table-column>
				<el-table-column label="最后一次编辑时间" :sortable="'custom'" align="center" prop="updateTime"></el-table-column>
				<el-table-column fixed="right" label="停启用状态" align="center" width="150">
					<template slot-scope="scope">
						<div v-if="scope.row.schemeId == 10"></div>
						<div v-else>
							<el-switch
								v-model="scope.row.isEnabled"
								active-color="#13ce66"
								inactive-color="#dedede"
								:active-value="true"
								:inactive-value="false"
								@change="changeSwitch(scope.$index, scope.row)"
							></el-switch>
						</div>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="250">
					<template slot-scope="scope">
						<div v-if="scope.row.schemeId == 10"></div>
						<div v-else >
							<el-button @click="cellClick(scope.row)" icon="el-icon-edit" type="warning" size="small">编辑</el-button>
							<el-button @click="selectClick(scope.row)" icon="el-icon-edit" type="warning" size="small">授权</el-button>
						</div>
						
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination
					background
					@current-change="columnFind"
					:current-page="page.page"
					:page-size="page.pagesize"
					layout="prev, pager, next, jumper, total"
					:total="page.count"
				></el-pagination>
			</div>
		</el-card>
		<el-dialog :title="cname" :visible.sync="dialogVisible" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
				<el-form-item label="归属组织机构" prop="name">
					<el-select filterable v-model="ruleForm.schemeId" style="width: 100%;" placeholder="按归属组织机构搜索">
						<el-option v-for="item in options" :key="item.schemeId" :label="item.schemeName" :value="item.schemeId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="角色名称" prop="name"><el-input v-model="ruleForm.roleName" placeholder="请输入角色名称" maxlength="20"></el-input></el-form-item>
				<el-form-item label="角色描述" prop="name">
					<el-input maxlength="100" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="ruleForm.roleTextarea"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm()">保存</el-button>
			</span>
		</el-dialog>
		<el-dialog :title="cname" :visible.sync="dialogColor" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm2" ref="ruleForm2" align="left" label-width="100px" class="demo-ruleForm">
				<el-form-item label="归属组织机构" prop="name">
					<el-select filterable v-model="editorRole" disabled style="width: 100%;" placeholder="按归属组织机构搜索">
						<el-option v-for="item in options" :key="item.schemeId" :label="item.schemeName" :value="item.schemeId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item maxlength="20" label="角色名称" prop="name"><el-input v-model="editorRoleName" placeholder="请输入角色名称"></el-input></el-form-item>

				<el-form-item label="角色描述" prop="name">
					<el-input maxlength="100" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="textarea"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogColor = false">取 消</el-button>
				<el-button type="primary" @click="submitForm2()">保 存</el-button>
			</span>
		</el-dialog>
		<!-- 授权选择 -->
		<el-dialog title="授权选择" :visible.sync="dialogselect" width="450px" :close-on-click-modal="false">
			<el-form align="left" label-width="100px" class="demo-ruleForm">
				<el-tree 
				:data="data" 
				show-checkbox 
				default-expand-all 
				node-key="menuId" 
				ref="tree" 
				highlight-current 
				:props="defaultProps"
				:default-checked-keys="menuIDs"
				></el-tree>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogselect = false">取 消</el-button>
				<el-button type="primary" @click="getCheckedKeys">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import Cookie from 'js-cookie';
import { roleManageList, getAllDeptList, roleSetDown, roleAddData, roleEditorData, roleEditorSave, roleShouQuan, saveShouQuan,moreData } from '../../../server/index.js';
export default {
	inject: ['reload'],
	data() {
		return {
			valueDate: [],
			//查询
			search: {},
			loading: true,
			tableData: [],
			options: [],
			ruleForm: {},
			ruleForm2: {},
			editorRole: '',
			editorRoleName: '',
			textarea: '',
			roleId: '',
			schemeId:'',
			openList: [
				{
					id: 0,
					name: '停用'
				},
				{
					id: 1,
					name: '启用'
				}
			],
			cname: '添加组织机构',
			page: {
				count: 0,
				pagesize: 10,
				page: 1
			},
			dialogVisible: false,
			dialogColor: false,
			dialogselect: false,
			// 授权
			defaultProps: {
				children: 'childenMenuList',
				label: 'menuName',
				menuId:'menuId'
			},
			data: [],
			menuIDs:[],
		};
	},
	mounted() {
		var page = 1;
		this.columnFind(page);
		this.optionsData();
		this.dataShouQuan();
		Cookie.remove('tabList');
	},
	methods: {
		// 刷新方法
		reloadVal() {
			this.reload();
		},
		// 查询、
		searchList() {
			this.columnFind(1);
		},
		// 排序
		sortChange(sortData) { 
			let orderBy;
			if(sortData.order != null){
				orderBy = sortData.prop;
				if(sortData.order == 'ascending'){
					orderBy += ' asc';
				}else{
					orderBy += ' desc';
				}
			}
			this.columnFind(1,orderBy);
		},
		columnFind(page,orderFlag) {
			const _this = this;
			_this.page.page = page;
			let startTime = _this.valueDate[0];
			let endTime = _this.valueDate[1];
			let obj = {
				keyword: undefined == _this.search.searchInput ? '' : _this.search.searchInput,
				startTime: undefined == startTime ? '' : startTime,
				endTime: undefined == endTime ? '' : endTime,
				schemeId: undefined == _this.search.schemeName ? '' : _this.search.schemeName,
				isEnabled: undefined == _this.search.title ? '' : _this.search.title,
				page: _this.page.page,
				rows: _this.page.pagesize,
				orderBy: undefined == orderFlag ? '' : orderFlag,
			};
			this.http.request({
				url: roleManageList,
				data: obj,
				success: function(res) {
					_this.loading = false;
					_this.tableData = res.list;
					_this.page.count = res.total;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 组织机构数据
		optionsData() {
			const _this = this;
			this.http.request({
				url: getAllDeptList,
				data: '',
				method: 'GET',
				success: function(res) {
					_this.options = res;
					
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 听启用
		changeSwitch(index, row) {
			const _this = this;
			let status = '';
			if (row.isEnabled == true) {
				status = 1;
			} else {
				status = 0;
			}
			let dataMsg = {
				roleId: row.roleId,
				status: status
			};
			_this.http.request({
				url: roleSetDown,
				data: dataMsg,
				success: function(res) {
					if (res && res == 1) {
						row.isEnabled = true;
					} else {
						row.isEnabled = false;
					}
				},
				error: function(err) {
					row.isEnabled = !row.isEnabled;
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		addColumnClick() {
			this.ruleForm = {};
			this.dialogVisible = true;
			this.cname = '创建角色';
		},
		// 保存添加
		submitForm() {
			const _this = this;
			if (!_this.ruleForm.schemeId) {
				_this.$message({
					offset: '200',
					message: '请输入归属组织机构'
				});
				return;
			}
			if (!_this.ruleForm.roleName) {
				_this.$message({
					offset: '200',
					message: '请输入角色名称'
				});
				return;
			}

			let dataMsg = {
				schemeId: _this.ruleForm.schemeId,
				roleName: _this.ruleForm.roleName,
				roleDesc: _this.ruleForm.roleTextarea == undefined ? '' : _this.ruleForm.roleTextarea
			};
			_this.http.request({
				url: roleAddData,
				data: dataMsg,
				success: function() {
					_this.dialogVisible = false;
					_this.reload();
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 编辑数据
		cellClick(res) {
			const _this = this;
			_this.cname = '编辑角色';
			_this.dialogColor = true;
			_this.roleId = res.roleId;
			_this.http.request({
				url: roleEditorData,
				data: {
					roleId: res.roleId
				},
				success: function(res) {
					if (res.schemeId == 'undefined') {
						_this.editorRole = '';
					} else {
						_this.editorRole = res.schemeId;
					}
					_this.editorRoleName = res.roleName;
					_this.textarea = res.roleDesc;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 保存编辑数据
		submitForm2() {
			const _this = this;
			if (!_this.editorRole) {
				_this.$message({
					offset: '200',
					message: '请输入归属组织机构'
				});
				return;
			}
			if (!_this.editorRoleName) {
				_this.$message({
					offset: '200',
					message: '请输入角色名称'
				});
				return;
			}

			let dataMsg = {
				roleId: _this.roleId,
				schemeId: _this.editorRole,
				roleName: _this.editorRoleName,
				roleDesc: _this.textarea
			};
			_this.http.request({
				url: roleEditorSave,
				data: dataMsg,
				success: function() {
					_this.dialogColor = false;
					_this.reload();
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		selectClick(row) {
			const _this = this;
			_this.dialogselect = true;
			_this.roleId = row.roleId;
			_this.schemeId = row.schemeId;
			_this.http.request({
				url: roleShouQuan,
				data: {roleId:row.roleId},
				success: function(res) {
					_this.data = res;
					_this.dataShouQuan(_this.roleId)
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		dataShouQuan(roleId){
			const _this = this;
			_this.http.request({
				url: moreData,
				data: {roleId:roleId},
				success: function(res) {
					_this.menuIDs = res;
					if(_this.$refs.tree){
						_this.$refs.tree.setCheckedKeys(_this.menuIDs);
					}
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		getCheckedKeys() {
			const _this = this;
			let menuIds = _this.$refs.tree.getCheckedKeys();
			// menuIds = menuIds[menuIds.length-1];
			let dataMsg = {
				menuIds:menuIds,
				roleId:_this.roleId,
				schemeId:_this.schemeId
			}
			_this.http.request({
				url: saveShouQuan,
				data: dataMsg,
				success: function(res) {
					if(res){
						_this.data = res;
						_this.dialogselect = false;
						_this.reload();
					}
					
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
			
			
		},
		
	}
};
</script>

<style scoped="scoped" lang="less">
.el-button--primary {
	background: rgba(113, 106, 202, 1);
	border: none;
}

.el-button--primary:hover {
	color: #606266;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(113, 106, 202, 1);
}

.el-button--warning {
	color: #fff;
	background-color: #f4516c;
	border-color: #f4516c;
}
</style>
